<template>
  <div class="app-container" style="position: relative">
    <div style="position: relative;width: 100%;overflow: auto">
        <div>
          <el-text style="font-size: 20px;font-weight: 600;">项目信息</el-text>
          <el-button style="color: black;margin-left: 90%" @click="toProject">返回</el-button>
          <el-divider border-style="dashed" />
          <span style="font-size: 17px;font-weight: 600;margin-right: 10px">项目名称:</span><span>{{projectName}}</span>
          <span style="font-size: 17px;font-weight: 600;margin-right: 10px;margin-left: 200px">项目编号:</span><span>{{code}}</span>
          <el-divider />
        </div>
        <el-form ref="queryRef" style="width: 100%;" label-width="200px" label-position="top">
          <!--任务书、协议书、科研合同-->
          <el-form-item label="任务书、协议书、科研合同：" prop="rxk" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.rxk" style="display: block">
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.rxk==0" v-for="(file, index) in fileForm.rxk" :key="index">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.rxk" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--试验、试验、测试分析报告单-->
          <el-form-item label="实验、试验、测试分析报告单：" prop="sscBgd" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.sscBgd" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.sscBgd==0" v-for="(file, index) in fileForm.sscBgd" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.sscBgd" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--科研合同验收文件材料-->
          <el-form-item label="科研合同验收文件材料：" prop="kyht" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.kyht" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.kyht==0" v-for="(file, index) in fileForm.kyht" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.kyht" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--全部实验、试验、测试分析相关资料电子版-->
          <el-form-item label="全部实验、试验、测试分析相关资料电子版：" prop="sscZl" style="width: 100%;"
                        label-width="130px">
            <el-radio-group v-model="typeForm.sscZl" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.sscZl==0" v-for="(file, index) in fileForm.sscZl" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.sscZl" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--项目经费决算-->
          <el-form-item label="项目经费决算：" prop="xmjf" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.xmjf" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.xmjf==0" v-for="(file, index) in fileForm.xmjf" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.xmjf" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--文件归档情况确认表-->
          <el-form-item label="文件归档情况确认表：" prop="wjgd" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.wjgd" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.wjgd==0" v-for="(file, index) in fileForm.wjgd" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.wjgd" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--文件材料归档审查表-->
          <el-form-item label="文件材料归档审查表：" prop="wjcl" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.wjcl" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true ">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.wjcl==0" v-for="(file, index) in fileForm.wjcl" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.wjcl" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--必要的归档说明及归档补充文件材料等-->
          <el-form-item label="必要的归档说明及归档补充文件材料等：" prop="gdsm" style="width: 100%;" label-width="130px">
            <el-radio-group v-model="typeForm.gdsm" >
              <el-radio :label="0" size="large" :disabled="true">是</el-radio>
              <el-radio :label="1" size="large" :disabled="true">否</el-radio>
            </el-radio-group>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.gdsm==0" v-for="(file, index) in fileForm.gdsm" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
            <el-input :readonly="true" v-else v-model="reasonForm.gdsm" placeholder="请输入报告单理由:"
                      style="width: 50%;margin-left: 20px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-divider  />
          <!--其他-->
          <el-form-item label="其他：" prop="other" style="width: 100%;" label-width="130px">
            <el-upload
                        style="margin-left: 2%;"
                        v-model:file-list="fileForm.other"
                        :action='baseurl+"/common/upload"'
                        :on-success="(response, uploadFile, uploadFiles)=>upload(response, uploadFile, uploadFiles,'other')"
                        :show-file-list="false"
                    >
                      <el-button type="primary">上传</el-button>
                    </el-upload>
            <el-divider border-style="hidden" style="margin: 0 0" />
            <el-card v-if="typeForm.other==0" v-for="(file, index) in fileForm.other" :key="index" style="width: 800px">
              <div slot="header" class="clearfix">
                <span>{{ file.name }}</span>
                <el-button style="float: right; margin-left: 2%" type="danger" link @click="remove(file,'other')">
                  删除
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="primary" link @click="handleDownload(file)">
                  下载
                </el-button>
                <el-button style="float: right; margin-left: 2%" type="warning" link @click="handlePreview(file)">
                  查看
                </el-button>
              </div>
            </el-card>
          </el-form-item>
          <el-divider  />
        </el-form>
    </div>
  </div>
  <!-- 文件预览   -->
  <el-dialog
      title="文件预览"
      v-model="openPreview"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :show-close="true"
      :width="800"
  >
    <vue-office-docx
        v-if="file.extension === 'docx'"
        :src="file.filePath"
        style="height: 100vh;"
    />
    <vue-office-excel
        v-else-if="file.extension === 'xlsx'"
        :src="file.filePath"
        style="height: 100vh;"
    />
    <vue-office-pdf
        v-else-if="file.extension === 'pdf'"
        :src="file.filePath"
    />
    <el-image v-else-if="file.extension === 'jpg' ||file.extension === 'png' || file.extension === 'gif'"
              style="width: 100%" :src="file.filePath" fit="contain"/>
    <span v-else>该格式文件暂不支持阅览！</span>
  </el-dialog>
</template>

<script setup>

import {ref, reactive} from "vue";
import {insertSummarize, listSummarize, removeFile, updateOthers} from "@/api/summarize/summarize.js";

const baseurl = import.meta.env.VITE_APP_BASE_API;

import {useRoute} from "vue-router";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";

const pid = useRoute().query.id;
const openPreview = ref(false);
const projectName=ref();
const code=ref();
const file=ref({fileName: null, filePath: null, extension: null});

/** 转到项目 */
function toProject() {
  router.push({path: '/summarize'});
}

const typeForm = ref({});//0为文件，1为原因
const fileForm = ref({rxk: [], sscBgd: [], kyht: [], sscZl: [], xmjf: [], wjgd: [], wjcl: [], gdsm: [], other: []});
const reasonForm = ref({});
//解析后端传回的值
function parse(data) {
  //rxk
  typeForm.value.rxk = type(data.rxk);
  fileForm.value.rxk = parseFiles(data.rxk);
  reasonForm.value.rxk = parseReason(data.rxk);
  //sscBgd
  typeForm.value.sscBgd = type(data.sscBgd);
  fileForm.value.sscBgd = parseFiles(data.sscBgd);
  reasonForm.value.sscBgd = parseReason(data.sscBgd);
  //kyht
  typeForm.value.kyht = type(data.kyht);
  fileForm.value.kyht = parseFiles(data.kyht);
  reasonForm.value.kyht = parseReason(data.kyht);
  //sscZl
  typeForm.value.sscZl = type(data.sscZl);
  fileForm.value.sscZl = parseFiles(data.sscZl);
  reasonForm.value.sscZl = parseReason(data.sscZl);
  //xmjf
  typeForm.value.xmjf = type(data.xmjf);
  fileForm.value.xmjf = parseFiles(data.xmjf);
  reasonForm.value.xmjf = parseReason(data.xmjf);
  //wjgd
  typeForm.value.wjgd = type(data.wjgd);
  fileForm.value.wjgd = parseFiles(data.wjgd);
  reasonForm.value.wjgd = parseReason(data.wjgd);
  //wjcl
  typeForm.value.wjcl = type(data.wjcl);
  fileForm.value.wjcl = parseFiles(data.wjcl);
  reasonForm.value.wjcl = parseReason(data.wjcl);
  //gdsm
  typeForm.value.gdsm = type(data.gdsm);
  fileForm.value.gdsm = parseFiles(data.gdsm);
  reasonForm.value.gdsm = parseReason(data.gdsm);
  //other
  typeForm.value.other = type(data.other);
  fileForm.value.other = parseFiles(data.other);
  reasonForm.value.other = parseReason(data.other);
}

//判断是否有文件
function type(str) {
  if (str == null || str == '')
    return 0;
  let type = str.slice(0, str.indexOf(':'));
  return type == 'file' ? 0 : 1;
}
//将字符串转换为文件数组
function parseFiles(str) {
  if (str == null || str == '' || type(str) == 1)
    return [];
  let filestr = str.slice(str.indexOf(':') + 1);
  let files = filestr.split(';');
  files.pop();
  let res = [];
  for (let f of files) {
    res.push({name: f.slice(f.lastIndexOf('/') + 1), url: f});
  }
  return res;
}
//解析原因
function parseReason(str) {
  if (str == null || str == '' || type(str) == 0)
    return '';
  let reason = str.slice(str.indexOf(':') + 1);
  return reason;
}
//将文件数组转为字符串
function toFile(files) {
  let f = 'file:';
  for (let file of files) {
    f += file.url + ';'
  }
  return f;
}
//获取页面内容
function getList() {
  listSummarize(pid).then(res => {
    projectName.value=res.data.projectName;
    code.value=res.data.code;
    parse(res.data);
  })
}

function handlePreview(f) {//文件预览
  file.value.fileName = f.name;
  file.value.filePath = f.url;
  file.value.extension = getFileExtension(f.name);
  openPreview.value = true;
}

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

function handleDownload(file) {//文件下载
  const name = file.name.slice(0,file.name.lastIndexOf('_'))+file.name.slice(file.name.lastIndexOf('.'));
  console.log(name);
  const url = file.url;
  const a = document.createElement('a')
  a.download=name;
  a.setAttribute('download', name)
  a.setAttribute('target', '_blank')
  a.setAttribute('href', url)
  a.click()
}
//上传
function upload(response, file, abandon, param) {
  console.log('上传成功:', response)
  // 处理上传成功后的回调
  const fileInfo = {
    name: file.name,
    url: response.url  // 假设响应中包含了文件的访问路径
  };
  switch (param) {
    case 'rxk':
      fileForm.value.rxk.pop();
      fileForm.value.rxk.push(fileInfo);
      insertSummarize({projectId: pid, rxk: toFile(fileForm.value.rxk)}).then(res => {
      })
      break;
    case 'sscBgd':
      fileForm.value.sscBgd.pop();
      fileForm.value.sscBgd.push(fileInfo);
      insertSummarize({projectId: pid, sscBgd: toFile(fileForm.value.sscBgd)}).then(res => {
      })
      break;
    case 'kyht':
      fileForm.value.kyht.pop();
      fileForm.value.kyht.push(fileInfo);
      insertSummarize({projectId: pid, kyht: toFile(fileForm.value.kyht)}).then(res => {
      })
      break;
    case 'sscZl':
      fileForm.value.sscZl.pop();
      fileForm.value.sscZl.push(fileInfo);
      insertSummarize({projectId: pid, sscZl: toFile(fileForm.value.sscZl)}).then(res => {
      })
      break;
    case 'xmjf':
      fileForm.value.xmjf.pop();
      fileForm.value.xmjf.push(fileInfo);
      insertSummarize({projectId: pid, xmjf: toFile(fileForm.value.xmjf)}).then(res => {
      })
      break;
    case 'wjgd':
      fileForm.value.wjgd.pop();
      fileForm.value.wjgd.push(fileInfo);
      insertSummarize({projectId: pid, wjgd: toFile(fileForm.value.wjgd)}).then(res => {
      })
      break;
    case 'wjcl':
      fileForm.value.wjcl.pop();
      fileForm.value.wjcl.push(fileInfo);
      insertSummarize({projectId: pid, wjcl: toFile(fileForm.value.wjcl)}).then(res => {
      })
      break;
    case 'gdsm':
      fileForm.value.gdsm.pop();
      fileForm.value.gdsm.push(fileInfo);
      insertSummarize({projectId: pid, gdsm: toFile(fileForm.value.gdsm)}).then(res => {
      })
      break;
    case 'other':
      fileForm.value.other.pop();
      fileForm.value.other.push(fileInfo);
      insertSummarize({projectId: pid, other: toFile(fileForm.value.other)}).then(res => {
      })
      break;
  }
}
//删除
function remove(file, param) {
  let fname = file.url.slice(file.url.indexOf('/upload'));
  switch (param) {
    case 'other':
      for (let i = 0; i < fileForm.value.other.length; i++) {
        if (fileForm.value.other[i].name === file.name) {
          fileForm.value.other.splice(i, 1);
        }
      }
      insertSummarize({projectId: pid, other: toFile(fileForm.value.other)}).then(res => {
        removeFile(fname).then(res => {
        })
      })
      break;
  }

}

getList();
</script>

<style scoped lang="css">
:deep(.el-form-item__label){
  font-size: 20px;
}
.el-card{
  width: 800px;
  margin-left: 20px;
  margin-top: 10px
}
</style>
